<template>
  <div class="batch-import">
    <el-drawer
      v-model="visible"
      :title="title"
      :size="props.width"
      :show-close="true"
      :before-close="hide"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal="true"
      :modal-append-to-body="true"
    >
      <template #title>
        <div class="drawer-header">
          <div class="flex items-center dot" v-if="showDot">
            <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
            <span class="ml-2 drawer-title">{{ props.title }}</span>
          </div>
        </div>
      </template>
      <div class="drawer-content">
        <slot></slot>
        <div>
          <el-form
            :model="formData"
            label-width="134px"
            :rules="rules"
            ref="formRef"
            label-position="left"
          >
            <el-form-item label="规则名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="适用地区" prop="areaId">
              <el-select
                v-model="formData.areaId"
                placeholder="请选择地区"
                @change="handleAreaChange"
                clearable
              >
                <template v-for="item in areaList" :key="item.id">
                  <el-option :label="item.label" :value="item.value" />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="开启IP判断" prop="isIpJudgment" class="cloak-switch">
              <el-switch
                v-model="formData.isIpJudgment"
                :active-text="formData.isIpJudgment == 0 ? '启用' : '关闭'"
                class="block"
                :active-value="0"
                :inactive-value="1"
              />
              <p class="block text-[#999] text-[12px]">非目标地区IP访问不跳转到b商品链接</p>
            </el-form-item>
            <el-form-item label="浏览器语言判定" prop="isBrowserLanguage">
              <el-switch
                v-model="formData.isBrowserLanguage"
                :active-text="formData.isBrowserLanguage == 0 ? '启用' : '关闭'"
                class="block"
                :active-value="0"
                :inactive-value="1"
              />
            </el-form-item>
            <el-form-item label="浏览器语言" prop="browserLanguage">
              <el-select v-model="formData.browserLanguage" placeholder="请选择浏览器语言">
                <template v-for="item in browserLanguageType" :key="item.id">
                  <el-option :label="item.label" :value="item.value" />
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="是否开启VPN判断" prop="isVpn">
              <el-switch
                v-model="formData.isVpn"
                :active-text="formData.isVpn == 0 ? '启用' : '关闭'"
                class="block"
                :active-value="0"
                :inactive-value="1"
              />
            </el-form-item>
            <el-form-item label="判断强度" prop="vpnStrength">
              <el-radio-group v-model="formData.vpnStrength">
                <el-radio label="1">强</el-radio>
                <el-radio label="2">弱</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="广告流量标识" prop="adTrafficIdentification" class="cloak-switch">
              <el-switch
                v-model="formData.adTrafficIdentification"
                :active-text="formData.adTrafficIdentification == 0 ? '启用' : '关闭'"
                class="block"
                :active-value="0"
                :inactive-value="1"
              />
              <p class="block text-[#999] text-[12px]"
                >开启后，具备广告标识的流量才有ab跳，目前兼容Facebook、Tik Tok</p
              >
            </el-form-item>
            <el-form-item label="支持设备" prop="supportedDevices">
              <el-checkbox-group v-model="formData.supportedDevices">
                <el-checkbox
                  v-for="(itm, idx) in supportedDevicesType"
                  :key="idx"
                  :label="itm.label"
                  :value="itm.value"
                  >{{ itm.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="白名单库">
              <el-input
                v-model="formData.whitelistLibrary"
                placeholder="请输入"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="el-dia-btn">
          <el-button @click="hide">取消</el-button>
          <el-button type="primary" color="#3721FF" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'BatchImport' })
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict' //获取字典
const supportedDevicesType = ref(getStrDictOptions(DICT_TYPE.SUPPORTED_DEVICES_TYPE))
const browserLanguageType = ref(getStrDictOptions(DICT_TYPE.BROWSER_LANGUAGE)) //获取语言字典
import { throttle } from '@/utils'

import {
  getDeptList,
  getUserList,
  handleGetGlobeState,
  handleGetGlobeStateByIdList
} from '@/utils/index'
import { WebCloakApi } from '@/api/website/cloak'
const visible = ref(false)
const props = defineProps({
  showDot: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '批量导入'
  },
  // 宽度
  width: {
    type: String,
    default: '50%'
  }
})
const emit = defineEmits(['close', 'confirm'])
const formRef = ref()
const formData = ref({
  name: '',
  areaId: '',
  area: '',
  isIpJudgment: 1, //开启IP判断
  isBrowserLanguage: 1, //浏览器语言判定
  browserLanguage: '', //浏览器语言
  isVpn: 1, //是否开启VPN判断
  vpnStrength: '1', //判断强度
  adTrafficIdentification: 1, //广告流量标识
  supportedDevices: [], //支持设备
  whitelistLibrary: '', //白名单库
  stateAbbreviation: '', //州缩写
  status: 0 //账号状态
})
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  areaId: [{ required: true, message: '请选择地区', trigger: 'blur' }],
  browserLanguage: [{ required: true, message: '请选择浏览器语言', trigger: 'blur' }],
  isIpJudgment: [{ required: true, message: '请选择IP判断', trigger: 'blur' }],
  isBrowserLanguage: [{ required: true, message: '请选择浏览器语言判断', trigger: 'blur' }],
  isVpn: [{ required: true, message: '请选择VPN判断', trigger: 'blur' }],
  vpnStrength: [{ required: true, message: '请选择判断强度', trigger: 'blur' }],
  adTrafficIdentification: [{ required: true, message: '请选择广告流量标识', trigger: 'blur' }],
  supportedDevices: [{ required: true, message: '请选择支持设备', trigger: 'blur' }]
}
const areaList = ref([])
const languageList = ref([])
const selectId = ref('')

// 根据地区获取语言
const handleAreaChange = async (val) => {
  if (!val) return
  console.log(areaList.value, 'areaList.value')

  formData.value.area = areaList.value.find((item) => item.value == val).label
  formData.value.stateAbbreviation = areaList.value.find(
    (item) => item.value == val
  ).stateAbbreviation
  languageList.value = await handleGetGlobeStateByIdList(val)
  formData.value.browserLanguage = ''
}
// 根据地区获取语言
// const handleLanguageFocus = async () => {
//   if (!formData.value.areaId) {
//     ElMessage.warning('请先选择地区')
//   }
// }
const confirm = throttle(() => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      formData.value.supportedDevices = formData.value.supportedDevices.join(',')
      emit('confirm', formData.value)
      hide()
    }
  })
},  1000)
const resetForm = () => {
  formRef.value?.resetFields()
}
const show = (id) => {
  visible.value = true
  console.log(id, 'id')
  selectId.value = id || ''
  if (id) {
    handleWebCloak(id)
  } else {
    resetForm()
  }
}
// 查询cloak设置详情
const handleWebCloak = async (id) => {
  const data = await WebCloakApi.getWebCloak(id)
  formData.value = data
  formData.value.supportedDevices = data.supportedDevices.split(',')
}
const hide = () => {
  visible.value = false
  emit('close')
}
watch(
  () => props.isBatchImport,
  (val) => {
    visible.value = val
  }
)
onMounted(async () => {
  areaList.value = await handleGetGlobeState() //获取地区
})
defineExpose({
  resetForm,
  show,
  hide
})
</script>

<style scoped>
@import '@/styles/website.scss';
.cloak-switch :deep(.el-form-item__content) {
  display: block !important;
}
</style>
